<template>
  <el-dialog
    :title="title"
    :visible.sync="extraProcess.visible"
    width="30%"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :lock-scroll="false"
  >
    <div v-loading="processLoading">
      <el-form v-if="extraProcess.processData !== undefined && extraProcess.processData.processKey !== undefined" ref="form" label-position="top" :rules="rules" :model="form">
        <el-row class="extra-process">
          <el-col :span="24">
            <el-form-item :label="$t('是否加急')" prop="isUrgent">
              <el-radio-group v-model="form.isUrgent">
                <el-radio label="Y">{{ $t('是') }}</el-radio>
                <el-radio label="N">{{ $t('否') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="moreUser">
            <div class="title">
              <div class="form-item__label">
                {{ $t('关联流程') }}
                <el-tooltip :content="$t('选择后审批人可在待办中查看该流程信息')" placement="top" :enterable="false">
                  <i class="el-icon-warning-outline" />
                </el-tooltip>
                <a class="link_a" @click="chooseActApply">{{ $t("选择") }}</a>
              </div>
            </div>
          </el-col>
          <el-col v-if="associatedProcess.length > 0" :span="24">
            <div class="assProcess">
              <el-tag
                v-for="item in associatedProcess"
                :key="item.id"
                size="small"
              >
                {{ item.title }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="24">
            <div v-if="form.applyChoiceAssignee !== undefined && form.applyChoiceAssignee.length > 0" class="form-item__label">请为以下节点选择审批人</div>
          </el-col>
          <el-col :span="24">
            <el-form-item v-for="(item, index) in form.applyChoiceAssignee" :key="index" :label="item.taskName" class="selectStyle" :prop="'applyChoiceAssignee.' + index + '.userList'" :rules="[{required: item.required, message: $t('必填信息'), trigger: 'change'}]">
              <userSelect v-if="!item.userScopeList" v-model="item.userList" :multiple="true" style="width: 100%" />
              <el-select v-if="item.userScopeList" v-model="item.userList" multiple style="width: 100%">
                <el-option
                  v-for="user in item.userScopeList"
                  :key="user.id"
                  :label="$t(user.nickName)"
                  :value="user.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col v-if="extraProcess.processData.processKey === 'act_free_flow_approval' || extraProcess.processData.processKey === 'act_self_built_process'" :span="24" class="moreUser">
            <div class="title">
              <div class="form-item__label error">
                {{ $t('下一审批人') }}
                <el-tooltip :content="$t('如添加多个审批人,则多个审批人按顺序审批')" placement="right" :enterable="false">
                  <i class="el-icon-warning-outline" />
                </el-tooltip>
              </div>
            </div>
            <el-form-item v-for="(item, index) in form.nextApply" :key="index" class="selectStyle" :prop="'nextApply.' + index + '.user'" :rules="[{required: true, message: $t('必填信息'), trigger: 'change'}]">
              <div class="nextUser">
                <userSelect v-model="item.user" :multiple="extraProcess.processData.processKey === 'act_self_built_process'" />
                <i v-if="index>0" class="el-icon-error" @click="delUser(index)" />
              </div>
            </el-form-item>
            <a class="link-type" @click="addUser()">{{ $t('继续添加') }}</a>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button @click="handleClose()">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="handleOK">{{ $t("保存") }}</el-button>
      </div>

      <el-dialog :visible.sync="chooseApplyOpen" :title="$t('选择关联流程')" custom-class="dialogForm" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
        <choose-apply ref="chooseApply" />
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
  import { startProcess, beforeTheProcessStarts, getApplyChoiceByKey } from '@/api/act/process/actProcess'
  import { mapGetters } from 'vuex'
  import ChooseApply from '@/views/act/process/chooseApply'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    components: { ChooseApply },
    data() {
      return {
        title: this.$t('启动流程'),
        // 遮罩层
        processLoading: false,
        // 选择关联流程
        chooseApplyOpen: false,
        // 关联流程
        associatedProcess: [],
        form: {
          // 申请人选择的审批人
          applyChoiceAssignee: [],
          actApply: false,
          isUrgent: 'N',
          nextApply: [
            { user: '' }
          ]
        },
        rules: {
          isUrgent: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ],
          nextApply: [
            { required: true, message: this.$t('必填信息'), trigger: 'blur' }
          ]
        },
        applyChoiceAssigneeRules: {
          userList: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
        }
      }
    },
    computed: {
      ...mapGetters(['extraProcess'])
    },
    watch: {
      'extraProcess.visible': function(val) {
        if (val) {
          this.associatedProcess = []
          this.form.actApply = false
          this.form.isUrgent = 'N'
          this.form.nextApply = [
            { user: '' }
          ]
        }
      },
      'extraProcess.processData.processKey': function(val) {
        if (val !== null && val !== '' && val !== undefined) {
          this.processLoading = true
          getApplyChoiceByKey(val).then((res) => {
            this.form.applyChoiceAssignee = res.data
            this.processLoading = false
          })
        }
      }
    },
    methods: {
      addUser() {
        // 继续添加
        const row = {
          user: ''
        }
        this.form.nextApply.push(row)
      },
      delUser(index) {
       this.form.nextApply.splice(index, 1)
      },
      handleClose() {
        this.$store.dispatch('app/toggleExtraProcess', false)
      },
      handleOK() {
        this.$refs['form'].validate(async valid => {
          if (valid) {
            // 是否加急
            this.processLoading = true
            // 启动流程中的保存按钮: 启动参数 onBeforeProcess = true
            await beforeTheProcessStarts(this.extraProcess.processData.menuKey, this.extraProcess.processData.onBeforeProcess, this.extraProcess)
            this.extraProcess.processData.isUrgent = this.form.isUrgent
            this.extraProcess.processData.nextApply = this.form.nextApply
            this.extraProcess.processData.associatedProcess = this.associatedProcess
            this.extraProcess.processData.applyChoiceAssignee = this.form.applyChoiceAssignee
            startProcess(this.extraProcess.processData).then(() => {
              this.extraProcess.callback && this.extraProcess.callback()
              this.$store.dispatch('app/toggleExtraProcess', false)
              this.processLoading = false
            }).catch(() => {
              this.processLoading = false
            })
            // this.processLoading = false
          }
        })
      },
      chooseActApply() {
        this.chooseApplyOpen = true
        this.$nextTick(() => {
          this.$refs.chooseApply.init(this.associatedProcess)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .vue-treeselect .vue-treeselect__control{
    line-height: 18px;
  }
  /deep/.selectStyle{
    .el-form-item__label{
      font-weight: 400 !important;
      color: #8D9092 !important;
      font-size: 13px;
    }
    .wrap>span{
      position: relative;
      display: inline-block;
      width: 100%;
      .tags {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
      }
    }
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .selectStyle {
    margin-bottom: 20px;
    width: calc(100% - 30px);
  }
  .moreUser .selectStyle {
    width: 100%!important;
  }
  /deep/.el-tag{
    border: 0;
    padding: 10px 15px;
    height: auto;
    line-height: unset;
    border-radius: 15px;
    margin-bottom: 5px;
  }

  /deep/.el-form-item__label {
    font-weight: 600;
    line-height: 20px;
    position: relative;
    &::before{
      position: absolute;
      left: -8px;
    }
  }
  .error{
    position: relative;
    &::before{
      position: absolute;
      left: -8px;
      content: '*';
      color: #ff4949;
    }
  }
  .form-item__label{
    font-size: 14px;
    font-weight: 600;
    color: #606266;
    line-height: 36px;
    padding: 0 0 10px 0;
    .link_a{
      font-weight: 400;
    }
  }
  .el-icon-warning-outline{
    color: #ABABAB;
    margin: 0 10px;
  }
  /deep/.el-radio__label{
    color: #999C9D;
    font-weight: 400;
  }
  .extra-process{
    padding-left: 10px;
    max-height: 50vh;
    overflow: auto;
    margin-right: -20px;
    padding-right: 20px;
    margin-bottom: 10px;
  }
  /deep/.nextUser{
    >div{
      flex: 1;
      max-width: calc(100% - 30px);
    }
    .wrap {
      margin-bottom: 0!important;
    }
  }
</style>
